<template>
	<view class="mosk" v-if="imgNmuber">
		<view class="mosk-box">
			<!-- imgNmuber  1=保留成功  2=金牌零工  3=保留失败 4=晋升失败  5=正式零工 -->
			<image class="img" :src="`https://images.linglinggong.net/XCX/grow/top_${imgNmuber}.png`"></image>
			<view :class="['mosk-box-text', [1,4].includes(imgNmuber)?'top2':'top1']">
				<view></view>
				<view>
					<text v-if="imgNmuber==4"
						style="display: flex;font-size: 32rpx;justify-content: center;margin-top: 40rpx; margin-bottom: 20rpx; font-weight: 600; color:#4E9900">您目前仍是金牌身份</text>
					{{iconTitle}}
					<text v-if="imgNmuber==4"
						style="display: flex;font-size: 32rpx;justify-content: center;font-weight: 400; color:#FF851D">{{ time }}</text>
					<text v-if="imgNmuber==1"
						style="display: flex;font-size: 32rpx;justify-content: center;font-weight: 400; color: rgba(38, 38, 38, 1);">身份成功</text>
				</view>
				<view :class="[imgNmuber==4?'color2':'color1',  [1,4].includes(imgNmuber)?'margin2':'margin1'   ]">
					{{iconTitle2}}
				</view>
				<view v-if="imgNmuber==2">
					<text> 保留成功，身份不变动 </text>
					<text> 保留失败，退回至正式零工 </text>
				</view>
			</view>
			<!-- 确认按钮 -->
			<view class="mosk-box-btn" @click="toParents"> 我知道了 </view>
		</view>
	</view>
</template>
<script>
	export default ({
		props: {
			imgNmuber: {
				type: Number,
				default: 0,
			},
			// 身份
			iconTitle: {
				type: String,
				default: '',
			},
			// 绿色文字提示
			iconTitle2: {
				type: String,
				default: '',
			},
			time: {
				type: String,
				default: '',
			},
		},
		data() {
			return {}
		},
		methods: {
			// 关闭弹框
			toParents() {
				this.$emit('fromChild');
			}
		}
	})
</script>
<style scoped lang="scss">
	.mosk {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		height: 100vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;

		&-box {
			animation: zoomInDown ease-in-out 0.6s;
			width: 630rpx;
			height: 628rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.img {
				width: 630rpx;
				height: 300rpx;
				margin-top: -78rpx;
			}

			.top1 {
				margin-top: 68rpx;
			}

			.top2 {
				margin-top: 10rpx;
			}

			&-text {
				text-align: center;
				flex: 1;
				overflow: hidden;

				&>view:nth-child(1) {
					font-size: 32rpx;
					font-weight: 800;
					color: #262626;
				}

				&>view:nth-child(2) {
					font-size: 40rpx;
					height: 40rpx;
					font-weight: 800;
					color: #262626;
				}

				&>view:nth-child(3) {
					font-size: 28rpx;
					font-weight: bold;
					height: 28rpx;
					margin-top: 58rpx;
				}

				.color1 {
					color: #4E9900;
				}

				.color2 {
					color: #666;
				}

				.margin1 {
					margin-top: 30rpx !important;
				}

				.margin2 {
					margin-top: 100rpx !important;
				}

				&>view:nth-child(4) {
					font-size: 24rpx;
					font-weight: bold;
					color: #666;
					display: flex;
					flex-direction: column;
					text-align: left;
					margin-top: 20rpx;

					&>text {
						display: flex;
						align-items: center;
						margin-left: 140rpx;
					}

					&>text::before {
						content: '';
						width: 12rpx;
						height: 12rpx;
						background: #666;
						opacity: 1;
						display: block;
						border-radius: 50%;
						margin-right: 8rpx;
					}
				}
			}

			&-btn {
				width: 510rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #FCC92D;
				box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(252, 201, 45, 0.3);
				border-radius: 12rpx;
				text-align: center;
				color: #262626;
				font-weight: bold;
				font-size: 28rpx;
				align-self: center;
				margin-bottom: 30rpx;
			}
		}
	}

	@keyframes zoomInDown {
		from {
			opacity: 0;
			-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
			transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
		}

		60% {
			opacity: 1;
			-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
			transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
			-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
			animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
		}
	}
</style>
